<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reset Password</title>
    <link rel="stylesheet" href="../js/element-ui/lib/theme-chalk/index.css">
    <style>
        .success-message {
            color: green;
            margin-top: 10px;
        }
        .error-message {
            color: red;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-card class="box-card" style="width: 400px; margin: 100px auto;" title="Reset Password">
        <div style="padding: 20px;">
            <el-form :model="form" label-width="80px">
                <el-form-item label="旧密码">
                    <el-input v-model="form.oldPassword" type="password" placeholder="Enter old password"></el-input>
                </el-form-item>
                <el-form-item label="新密码">
                    <el-input v-model="form.newPassword" type="password" placeholder="Enter new password"></el-input>
                </el-form-item>
                <el-form-item label="再次输入">
                    <el-input v-model="form.confirmNewPassword" type="password" placeholder="Confirm new password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :disabled="isButtonDisabled || !form.newPassword || !form.confirmNewPassword" @click="resetPassword">修改</el-button>
                </el-form-item>
            </el-form>
            <div v-if="message" :class="[message === 'Password reset successfully!' ? 'success-message' : 'error-message']">
                {{ message }}
            </div>
        </div>
    </el-card>
</div>

<script src="../js/vue.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script src="../js/element-ui/lib/index.js"></script>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                form: {
                    oldPassword: '',
                    newPassword: '',
                    confirmNewPassword: '' // 新增字段
                },
                message: '',
                isButtonDisabled: false
            };
        },
        methods: {
            resetPassword() {
                this.message = ''; // 清除之前的错误消息
                // 检查新密码和确认新密码是否一致
                if (this.form.newPassword !== this.form.confirmNewPassword) {
                    this.message = '两次输入的新密码不一致！';
                    this.messageClass = 'error-message';
                    return;
                }

                // 检查新密码长度
                if (!this.form.newPassword || this.form.newPassword.length < 8) {
                    this.message = '密码长度不能少于8位！';
                    this.messageClass = 'error-message';
                    return;
                }

                this.isButtonDisabled = true; // 禁用按钮

                axios({
                    method: 'post',
                    url: '/password/reset',
                    data: {
                        oldPassword: this.form.oldPassword,
                        newPassword: this.form.newPassword
                    }
                }).then(response => {
                    if (response.status === 200) {

                        this.message = response.data || '密码修改成功！';
                        this.messageClass = 'success-message';
                        localStorage.setItem('showPasswordSuccess', 'true');
                        window.parent.postMessage({
                            type: 'changePage2',
                            passwordChanged: true
                        }, '*');
                    }
                }).catch(error => {
                    this.message = '密码修改失败：' + (error.response?.data || error.message);
                    this.messageClass = 'error-message';
                    // 确保清除可能设置的localStorage
                    localStorage.removeItem('showPasswordSuccess');
                }).finally(() => {
                    this.isButtonDisabled = false;
                });
            }
        }
    });
</script>
</body>
</html>